<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {
    title: {
      type: String,
    },
    contentHeight: {
      type: String,
    },
  },
  emits: ['cancel', 'confirm'],
  setup(props, { emit }) {
    const showModal = ref(false)
    const segmented = ref({
      content: 'soft',
      footer: 'soft',
    })

    const show = () => {
      showModal.value = true
      return Promise.resolve(true)
    }
    const colse = () => {
      showModal.value = false
      return Promise.resolve(true)
    }

    const onCancel = () => {
      emit('cancel')
      colse()
    }

    const onConfirm = () => {
      emit('confirm')
    }

    return {
      segmented,
      show,
      colse,
      onCancel,
      onConfirm,
      showModal,
    }
  },
})
</script>

<template lang="pug">
n-modal( v-model:show="showModal")
  div(class="w-1/3")
    n-card(:title="title" bordered :segmented="segmented")
      slot(name="default")
      template(#footer)
        div(class="flex justify-end gap-1 items-center")
          n-button(type="default" size="small" @click="onCancel") 取消
          n-button(type="primary" size="small" @click="onConfirm") 确定
</template>

<style lang="scss" scoped></style>
